<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			ul {
				padding: 0px;
				margin: 0px;
			}
			ul li {
				display: table-cell;
				padding: 10px;
				border: 1px solid #666;
				width: 78px;
				background-color: darkcyan;
				text-align: center;
				color: white;
				cursor: hand !important;
			}
			ol {
				padding-left: 16px;
				margin: 10px;
			}

			div {
				border: 1px solid #ccc;
				width: 298px;
			}

			.active {
				background-color: mediumaquamarine;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {
				var lis = document.getElementsByTagName("ul")[0].children;
				var ols = document.getElementsByTagName("ol");
				for (var i = 0; i < lis.length; i++) {
					lis[i].onclick = function() {
						var li = document.getElementsByClassName("active");
						for (var j = 0; j < li.length; j++) {
							li[j].className = "";
						}
						// for (var j = 0; j < tools.length; j++) {
						//// 	if (tools[j] != this) {
						// 		tools[j].className = "";
						// 	}
						// }
						this.className = "active";

						var id = this.attributes["data-bind-id"].value;
						for (var j = 0; j < ols.length; j++) {
							if (ols[j].id === id) {
								ols[j].style.display = "block";
							} else {
								ols[j].style.display = "none";
							}
						}
					}
				}
			}
		</script>
	</head>
	<body>
		<ul>
			<li data-bind-id="news" class="active">新闻</li>
			<li data-bind-id="tech">科技</li>
			<li data-bind-id="econ">经济</li>
		</ul>
		<div>
			<ol id="news">
				<li><a href="#">天使之泪，百感交集</a></li>
				<li><a href="#">疫情实时动态</a></li>
				<li><a href="#">科学是抗疫最有力的武器</a></li>
			</ol>
			<ol id="tech" style="display: none;">
				<li><a href="#">不用等iOS 14，消息称Apple..</a></li>
				<li><a href="#">新零售的“达摩克利斯之剑”</a></li>
				<li><a href="#">科技图鉴｜居家隔离的宝可梦</a></li>
			</ol>
			<ol id="econ" style="display: none;">
				<li><a href="#">契机！黎明前的黑暗！</a></li>
				<li><a href="#">央妈出手，智能存款危险了！</a></li>
				<li><a href="#">各地多措并举 恢复经济社会秩序</a></li>
			</ol>
		</div>
	</body>
</html>
